<template>
  <div class="home">
    <van-tabs v-model="active" animated color="#00ce6f" sticky>
      <van-tab  title="附近社区">
          <HomeCharge v-if="my"> 
            <div class="name">
              {{this.areaMsg.community}}
              <span class="my_title">我的社区</span>
            </div> 
            <ChargeStationCard v-for="(i,k) in my" :key="k"
            :point="i"
            :distance="i.distance"
            :myposition="myposition"/>
          </HomeCharge>
          <HomeCharge v-for="(value,key) in fenlei" :key="key">
            <div v-if="!(key==community)">
              <div class="name">{{key}}</div> 
              <ChargeStationCard v-for="(i,k) in value" :key="k"
              :point="i"
              :distance="i.distance"
              :myposition="myposition"/>
            </div>
          </HomeCharge>
      </van-tab>
      <van-tab  title="社区成员">
        <van-uploader :after-read="afterRead" v-model="fileList" multiple accept="image/*,video/*,audio/*,.pdf,.txt">
          <van-button icon="plus" type="primary">选择文件</van-button>
        </van-uploader>
        <van-button type="primary" @click="upload">上传文件</van-button>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import HomeCharge from '../components/HomeCommunity/HomeCharge.vue';
import ChargeStationCard from '@/components/ChargeStationCard/ChargeStationCard.vue'
// @ is an alias to /src
import {gcj2bdString} from '@/tool';
import {get_chargeStation,upload_file} from '@/api/index';
export default {
  name: 'Home',
  components: {
    HomeCharge,
    ChargeStationCard
  },
  data() {
    return {
      active: 0,
      myposition: {lng: 0, lat: 0},
      fenlei:null,
      my:null,
      fileList: []
    };
  },
  computed:{
      areaMsg(){
          return this.$store.state.areaMsg;
      },
      community(){
        if(Object.keys(this.areaMsg).length) return this.areaMsg.community;
        else return null;
      }
    },
  async created(){
      if (window.plus) {
           this.plusReady()
        } else {
            document.addEventListener('plusready', this.plusReady, false)
        }
      let myposition=this.$store.state.myPosition;
      this.myposition={...myposition};
      let res = await get_chargeStation(this.myposition)

      // console.log(res.data.chargeStation);
      let obj = {};
      res.data.chargeStation.forEach(item => {
          if(obj[item.community]){
            //存在这个键名
            obj[item.community].push(item)
          }
          else{
            obj[item.community]=[item];
          }
      });
      this.fenlei = obj;
      // console.log(obj);
      if(Object.keys(this.areaMsg).length){
        //我的社区
        this.my = this.fenlei[this.areaMsg.community]
      } 
    },
    watch:{
      async 'myposition.lng'(){
        console.log(2222);
        console.log(this.myposition);
        let res = await get_chargeStation(this.myposition)
        // console.log(res.data.chargeStation);
        let obj = {};
        res.data.chargeStation.forEach(item => {
            if(obj[item.community]){
              //存在这个键名
              obj[item.community].push(item)
            }
            else{
              obj[item.community]=[item];
            }
        });
        this.fenlei = obj;
        // console.log(obj);
        if(Object.keys(this.areaMsg).length){
          //我的社区
          this.my = this.fenlei[this.areaMsg.community]
        }
      }
    },
  methods:{
    upload(){
      let formData = new FormData();
      this.fileList.forEach(item => {
        formData.append('files', item.file)
      })
      upload_file(formData).then(res => {
        console.log("-> res", res);

      })

    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    plusReady(){
          const self = this
          console.log("plusReady--", plus.geolocation);
                // console.log(plus.geolocation.lastPosition);
          plus.geolocation.getCurrentPosition(
            async function (p) {
              console.log("HomeCharge", p.coords);
              let myposition={lng:p.coords.longitude,lat:p.coords.latitude};//凌塘村位置
              console.log("myposition",myposition);
              myposition = gcj2bdString(myposition)
              self.myposition = {...myposition}
              console.log("this.myposition",self.myposition);
              console.log(111);
            },
            function (err) {
              console.log("onPlusReady--err", err);
            }
          );
        },
  }
}
</script>
<style lang="less" scoped>
.home{
  margin-bottom: 50px;
  .HomeCharge{
    .name{
      background: #38b487;
      color: white;
      padding: 5px 5px;
      .my_title{
        float:right;
        font-size: 13px;
      }
    }
  }
}
</style>